<template>
  <view class="Water">
    <mineNavbar :styleData="styleData" />

    <scroll-view class="scroll" scroll-y v-if="items.length" @scrolltolower="scrollBottomFn">
      <view class="item" v-for="day in items" :key="day.integralId">
        <view class="left">
          <view class="day"> {{ day.description }} </view>
          <view class="time"> {{ day.createTime }} </view>
        </view>
        <view class="right">
          <text :class="day.type === '2' ? 'payOut' : ''">{{ day.type === "1" ? "+" : "-" }}{{ day.quantity }}</text>
        </view>
      </view>
      <view class="length"> - 加载完成，共{{ items.length }}条数据 - </view>
    </scroll-view>
    <noneState v-else></noneState>
  </view>
</template>

<script>
import { getIntegralLog } from "@/api/pages/mine.js"
import noneState from '@/pages/recruit/components/noneState.vue'

export default {
  components: { noneState },
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "积分流水",
      },
      pageSize: 10,
      pageNum: 1,
      pageTotal: 1,
      items: [],
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) { },
  onShow() { },
  onReady() { },
  mounted() {
    this.pageNum = 1
    this.getIntegralLogFun()
  },
  methods: {
    // 获取积分流水
    getIntegralLogFun() {
      getIntegralLog({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.code === 200) {
          this.pageTotal = Math.ceil(res.total / this.pageSize)
          if (this.pageNum === 1) {
            this.items = res.rows
          } else {
            res.rows.forEach((suc) => {
              this.items.push(suc)
            })
          }
        }
      })
      console.log(this.items);
    },
    // 监听滑动到底部
    scrollBottomFn() {
      this.pageNum += 1
      if (this.pageNum <= this.pageTotal) {
        this.getIntegralLogFun()
      } else {
        uni.showToast({
          title: '没有更多了',
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.Water {
  height: 100vh;
  width: 100%;
  background-color: #f9f9f9;

  .scroll {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24rpx;
    height: calc(100vh - 130rpx);

    .date {
      margin: 32rpx 0 0 16rpx;
    }

    .item {
      height: 145rpx;
      padding: 32rpx 24rpx 0;
      background: #ffffff;
      border-radius: 16rpx;
      margin: 20rpx 0;

      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        .day {
          height: 40rpx;
          font-family: PingFangSC-Medium;
          font-weight: 700;
          font-size: 30rpx;
          color: #000000;
          margin-bottom: 8rpx;
        }

        .time {
          font-weight: 500;
          font-size: 24rpx;
          color: #00000073;
          letter-spacing: 0;
        }
      }

      .right {
        color: #ff9e24;
        font-size: 36rpx;

        font-weight: 700;
        line-height: 0;
        letter-spacing: 0;

        text-align: center;

        .payOut {
          color: #28A3FF;
        }
      }
    }

    .length {
      font-weight: 500;
      font-size: 24rpx;
      color: #00000033;
      letter-spacing: 0;
      text-align: center;
      height: 80rpx;
      line-height: 80rpx;
    }
  }
}
</style>
